<template>
  <div class="container">
    <div class="header">
      <div class="left"></div>
      <div class="right">发布询价</div>
    </div>

    <div class="content">
      <el-card style="card-main">
        <FilterSearch></FilterSearch>

        <el-button class="add-price" @click="add()">新增询价</el-button>

        <Table
          :tableData="tableData"
          :tableColumn="tableColumn"
          :tableCellWidth="tableCellWidth"
          :tableCellAlign="tableCellAlign"
          :tableShowTooltip="tableShowTooltip"
          :tableEdit="tableEdit"
          :tableShowPagination="tableShowPagination"
          :paginationObj="paginationObj"
          :tableIsShowSerial="false"
          :tableIsShowCheckbox="true"
        >
          <!-- 自定义单元格 -->
          <template #type="scope">
            <el-tag type="success">{{ scope.row.type }}</el-tag>
          </template>

          <template #id="scope">
            <el-link type="primary" @click="clickOrder(scope.row)">{{
              scope.row.id
            }}</el-link>
          </template>

          <template #status="scope">
            <el-tag type="success">{{ scope.row.status }}</el-tag>
          </template>
        </Table>
      </el-card>
    </div>
  </div>
</template>

<script>
import FilterSearch from "./components/FilterSearch.vue";
import Table from "@/components/ability-components/table.vue";
export default {
  components: {
    FilterSearch,
    Table,
  },
  data() {
    return {
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: false,
        align: "center",
      },
      tableShowTooltip: [
        {
          prop: "name",
          showTooltip: false,
        },
        {
          prop: "status",
          showTooltip: false,
        },
      ],
      tableCellAlign: [
        {
          prop: "date",
          align: "center",
        },
        {
          prop: "type",
          align: "center",
        },
        {
          prop: "id",
          align: "center",
        },
        {
          prop: "model",
          align: "center",
        },
        {
          prop: "currency",
          align: "center",
        },
        {
          prop: "status",
          align: "center",
        },
        {
          prop: "people",
          align: "center",
        },
        {
          prop: "endTime",
          align: "center",
        },
        {
          prop: "desc",
          align: "center",
        },
      ],
      tableCellWidth: [
        {
          prop: "date",
          // width: "200",
        },
        {
          prop: "type",
        },
        {
          prop: "id",
          // width: "200",
        },
        {
          prop: "model",
        },
        {
          prop: "currency",
          // width: "200",
        },
        {
          prop: "status",
        },
        {
          prop: "people",
          // width: "200",
        },
        {
          prop: "endTime",
        },
        {
          prop: "desc",
        },
      ],
      tableColumn: [
        {
          prop: "date",
          label: "询价日期",
        },
        {
          prop: "type",
          label: "询价类型",
          slot: true,
        },
        {
          prop: "id",
          label: "询价单号",
          slot: true,
        },
        {
          prop: "model",
          label: "型号",
        },
        {
          prop: "currency",
          label: "币种",
        },
        {
          prop: "status",
          label: "状态",
          slot: true,
        },
        {
          prop: "people",
          label: "询价人",
        },
        {
          prop: "endTime",
          label: "截止日期",
        },
        {
          prop: "desc",
          label: "备注",
        },
      ],
      tableData: [
        {
          Key: "1",
          ID: "1",
          date: "2022-10-5 00:00:00",
          type: "实单询价",
          id: "XJ22020000294",
          model: "H1 H2",
          currency: "人民币",
          status: "进行中",
          people: "李好好",
          endTime: "2022-11-11 00:00:00",
          desc: "备注",
        },
        {
          Key: "2",
          ID: "2",
          date: "2022-10-5 00:00:00",
          type: "实单询价",
          id: "XJ22020000294",
          model: "H1 H2",
          currency: "人民币",
          status: "进行中",
          people: "李好好",
          endTime: "2022-11-11 00:00:00",
          desc: "备注",
        },
        {
          Key: "3",
          ID: "3",
          date: "2022-10-5 00:00:00",
          type: "实单询价",
          id: "XJ22020000294",
          model: "H1 H2",
          currency: "人民币",
          status: "进行中",
          people: "李好好",
          endTime: "2022-11-11 00:00:00",
          desc: "备注",
        },
        {
          Key: "4",
          ID: "4",
          date: "2022-10-5 00:00:00",
          type: "实单询价",
          id: "XJ22020000294",
          model: "H1 H2",
          currency: "人民币",
          status: "进行中",
          people: "李好好",
          endTime: "2022-11-11 00:00:00",
          desc: "备注",
        },
        {
          Key: "5",
          ID: "5",
          date: "2022-10-5 00:00:00",
          type: "实单询价",
          id: "XJ22020000294",
          model: "H1 H2",
          currency: "人民币",
          status: "进行中",
          people: "李好好",
          endTime: "2022-11-11 00:00:00",
          desc: "备注",
        },
      ],
    };
  },
  methods: {
    add() {
      this.$router.push("/home/addEnquiry");
    },
    clickOrder(item) {
      console.log(item);
      this.$router.push("/home/detailEnquiry");
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.container {
  .header {
    display: flex;
    margin-bottom: 20px;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }

  .content {
    height: calc(100vh - 160px);
    .el-card {
      height: 100%;
    }
    .add-price {
      margin: 20px 0;
      background-color: #442a8d;
      font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #ffffff;
      width: 120px;
    }
  }
}
</style>
